<template>
  <div class="input" style="display: none">
    <slot></slot>
  </div>
  <div :id="scoreId"></div>
</template>
<script lang="ts">
import abcjs from "abcjs";
import { onMounted, defineComponent, ref, getCurrentInstance } from "vue";

export default defineComponent({
  name: "Score",
  setup(props, { slots }) {
    const scoreId = ref(`score-${getCurrentInstance()?.uid}`);

    let abcTextNodes = slots.default?.();
    if (!abcTextNodes || abcTextNodes.length === 0) {
      return;
    }
    abcTextNodes = abcTextNodes.filter((node) => node.type !== "br");
    let abcText = "";
    abcText = abcTextNodes.map((node) => node.children).join("\n");

    onMounted(() => {
      abcjs.renderAbc(scoreId.value, abcText || "");
    });
    return {
      scoreId,
    };
  },
});
</script>